import { setFallbackAlbum } from "@/renderer/utils/img-on-error";
import "./index.scss";
import albumImg from "@/assets/imgs/album-cover.jpg";
import { memo } from "react";

interface IArtistItemProps {
    artistItem: IArtist.IArtistItem;
    onClick?: (artistItem: IArtist.IArtistItem) => void;
}

function ArtistItem(props: IArtistItemProps) {
    const { artistItem, onClick } = props;

    return (
        <div
            className="components--artist-item-container"
            role="button"
            onClick={() => {
                onClick?.(artistItem);
            }}
        >
            <div className="artist-img-wrapper">
                <img
                    src={artistItem?.avatar || albumImg}
                    onError={setFallbackAlbum}
                ></img>
                {/* <Condition
          condition={
            mediaItem?.playCount || mediaItem?.worksNum || mediaItem?.createAt
          }
        >
          <div className="album-play-info">
            {mediaItem?.createAt ? (
              dayjs(mediaItem.createAt).format("YYYY-MM-DD")
            ) : (
              <div></div>
            )}
            <div className="play-count">
              <Condition condition={mediaItem?.playCount}>
                <SvgAsset iconName={"headphone"} size={14}></SvgAsset>
                {normalizeNumber(mediaItem?.playCount)}
              </Condition>
            </div>
          </div>
        </Condition> */}
            </div>
            <div className="media-info">
                <div className="title" title={artistItem?.name}>
                    {artistItem?.name}
                </div>
                <div className="desc" title={artistItem?.description?.replace?.("\\n", "\n")}>
                    {(artistItem?.description ?? "").split("\\n").map((item, index) => (
                        <div key={index}>{item}</div>
                    ))}
                </div>
            </div>
        </div>
    );
}

export default memo(
    ArtistItem,
    (prev, curr) =>
        prev.artistItem === curr.artistItem && prev.onClick === curr.onClick,
);
